<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串模板</title>
</head>
<body>
    <h2>字符串模板</h2>
    <p>简化拼接变量</p>
    <hr>
    <div class="box"></div>
    <style>
        .box{
            width:200px;
            height:200px;
            border:1px red solid;
        }
    </style>
    <script>
        //向div中写一句话
        var str='hello';
        var div= document.getElementsByClassName('.box')
        div.innnerHTML='<h1>+str+</h1>';

        //采用字符串模板
        /*
        语法：
        `${变量名}`
        */
        let str1='world';
        div.innnerHTML=`<h1>${str1}</h1>`
    </script>
</body>
</html>